import React from 'react';
import { TabBar } from 'antd-mobile';
import ico_home from "./static/ico_home.svg";
import ico_home_hover from "./static/ico_home_hover.svg";
import ico_shuju from "./static/ico_shuju.svg";
import ico_shuju_h from "./static/ico_shuju_h.svg";
import ico_msg from "./static/ico_msg.svg";
import ico_msg_h from "./static/ico_msg_h.svg";
import ico_my from "./static/ico_my.svg";
import ico_my_h from "./static/ico_my_h.svg";

class Toolbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home'
        }
    }
    render() {
        return (
            <div style={{ position: 'fixed', height: '60px', width: '100%', bottom: 0,zIndex:9 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="Home"
                        icon={{ uri: ico_home }}
                        selectedIcon={{ uri: ico_home_hover }}
                        selected={this.props.selectedTab === 'Home'}
                        badge={1}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'Home',
                            });
                            this.props.history.push('/Home/')
                        }}
                        data-seed="Home"
                    ></TabBar.Item>
                    {/* <TabBar.Item
                        icon={{ uri: ico_msg }}
                        selectedIcon={{ uri: ico_msg_h }}
                        title="课程科普"
                        key="Course"
                        dot
                        selected={this.props.selectedTab === 'Course'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'Course',
                            });
                            this.props.history.push('/Course/')
                        }}
                    ></TabBar.Item> */}
                    <TabBar.Item
                        icon={{ uri: ico_shuju }}
                        selectedIcon={{ uri: ico_shuju_h }}
                        title="成长工具"
                        key="ChildDtl"
                        //badge={'new'}
                        selected={this.props.selectedTab === 'ChildDtl'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'ChildDtl',
                            });
                            this.props.history.push('/ChildDtl/')
                        }}
                        data-seed="ChildDtl"
                    ></TabBar.Item>
                    
                    <TabBar.Item
                        icon={{ uri: ico_my }}
                        selectedIcon={{ uri: ico_my_h }}
                        title="我的"
                        key="My"
                        selected={this.props.selectedTab === 'My'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'My',
                            });   
                            this.props.history.push('/My/')                         
                        }}
                    ></TabBar.Item>
                </TabBar>
            </div>
        );
    }
}
export default Toolbar;
